// 统一样式变量 - 透明玻璃主题
// 所有组件都使用这些变量，确保样式一致性

// ==================== 颜色变量 ====================
// 主色调
$primary-color: #00eaff;
$primary-color-light: rgba(0, 234, 255, 0.3);
$primary-color-lighter: rgba(0, 234, 255, 0.1);
$primary-color-dark: rgba(0, 234, 255, 0.8);

// 状态色
$success-color: #19e698;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$info-color: #909399;

// 背景色
$bg-primary: rgba(255, 255, 255, 0.05);
$bg-secondary: rgba(255, 255, 255, 0.02);
$bg-hover: rgba(255, 255, 255, 0.08);
$bg-focus: rgba(255, 255, 255, 0.1);
$bg-selected: rgba(0, 234, 255, 0.2);

// 边框色
$border-primary: rgba(255, 255, 255, 0.1);
$border-hover: rgba(0, 234, 255, 0.3);
$border-focus: #00eaff;

// 文字色
$text-primary: #ffffff;
$text-secondary: rgba(255, 255, 255, 0.9);
$text-placeholder: rgba(255, 255, 255, 0.5);
$text-disabled: rgba(255, 255, 255, 0.3);

// ==================== 效果变量 ====================
// 模糊效果
$blur-light: blur(10px);
$blur-medium: blur(15px);
$blur-heavy: blur(20px);

// 阴影效果
$shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
$shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.2);
$shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.3);
$shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.1);
$shadow-glow: 0 0 10px rgba(0, 234, 255, 0.3);

// 过渡效果
$transition-fast: all 0.2s ease;
$transition-normal: all 0.3s ease;
$transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

// 圆角
$radius-small: 6px;
$radius-medium: 8px;
$radius-large: 12px;

// 字体大小
$font-size-extra-large: 20px;
$font-size-large: 18px;
$font-size-medium: 16px;
$font-size-base: 14px;
$font-size-small: 13px;
$font-size-extra-small: 12px;

// 间距
$spacing-extra-large: 32px;
$spacing-large: 24px;
$spacing-medium: 16px;
$spacing-base: 12px;
$spacing-small: 8px;
$spacing-extra-small: 4px;

// 断点
$breakpoint-xs: 576px;
$breakpoint-sm: 768px;
$breakpoint-md: 992px;
$breakpoint-lg: 1200px;
$breakpoint-xl: 1600px;